<template>
  <div class="todo">
    <h2>待办事项</h2>

    <!-- 新增 -->
    <div class="todo-input">
      <TodoInput />
    </div>

    <!-- 状态 -->
    <div class="todo-state">
      <!-- 所有任务： {{ getCount.t }} 已完成：{{ getCount.d }} 未完成：{{ -->
      <!-- getCount.n -->
      <!-- }} -->
    </div>

    <!-- 状态切换 -->
    <div class="todo-tab">
      <label>
        所有任务
        <input type="radio" v-model="state" value="1" />
      </label>
      <label>
        已完成任务
        <input type="radio" v-model="state" value="2" />
      </label>
      <label>
        未完成任务
        <input type="radio" v-model="state" value="3" />
      </label>
    </div>

    <!-- 待办列表 -->
    <TodoList />
  </div>
</template>

<script>
import TodoInput from "./TodoInput.vue";
import TodoList from "./TodoList.vue";

export default {
  name: "ToDo",
  data() {
    return {
      state: "1",
    };
  },
  components: {
    TodoInput,
    TodoList,
  },
  // computed: {
  //   getCount() {
  //     let t = this.todoList.length;
  //     let d = this.todoList.filter((item) => item.state).length;
  //     let n = t - d;
  //     return { t, d, n };
  //   },
  //   getList() {
  //     let a;
  //     if (this.state === "1") {
  //       a = this.todoList;
  //     } else if (this.state === "2") {
  //       a = this.todoList.filter((item) => item.state);
  //     } else if (this.state === "3") {
  //       a = this.todoList.filter((item) => !item.state);
  //     }

  //     return a;
  //   },
  // },
  mounted() {},
  directives: {
    // 自定义指令 - 使用时以 v- 开头
    focus: {
      // 指令所在标签插入节点后，自动运行
      inserted: function (el) {
        console.log(el);
        // el 表示指令所在的标签
        el.focus();
      },
    },
  },
  methods: {},
};
</script>

<style lang="scss">
.todo {
  width: 600px;
  margin: 50px auto 0;

  h2 {
    text-align: center;
    padding: 10px;
  }

  .todo-input {
    padding: 10px;
  }

  .todo-tab {
    label {
      margin-right: 10px;
    }
  }
  .todo-tab,
  .todo-state {
    padding: 10px;
  }
}
</style>